<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增导航</el-button>
      </el-col>
    </el-row>

    <el-table :data="tabbarList">
        <el-table-column label="导航名称" prop="name" />
        <el-table-column label="未选图标" prop="unselected">
            <template slot-scope="scope"><image-preview :src="scope.row.unselected" width="30" height="30"/></template>
        </el-table-column>
        <el-table-column label="已选图标" prop="selected">
            <template slot-scope="scope"><image-preview :src="scope.row.selected" width="30" height="30"/></template>
        </el-table-column>
        <el-table-column label="链接地址" prop="link" />
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 添加或修改导航项的弹窗 -->
    <el-dialog :title="title" :visible.sync="open" width="600px">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="导航名称" prop="name"><el-input v-model="form.name" /></el-form-item>
            <el-form-item label="链接地址" prop="link"><el-input v-model="form.link" /></el-form-item>
            <el-form-item label="未选图标"><image-upload v-model="form.unselected" /></el-form-item>
            <el-form-item label="已选图标"><image-upload v-model="form.selected" /></el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { listTabbar, addTabbar, updateTabbar, delTabbar } from '@/api/iot/tabbar';
import ImageUpload from '@/components/ImageUpload';
import ImagePreview from '@/components/ImagePreview';

export default {
    name: "TabBarManagement",
    components: { ImageUpload, ImagePreview },
    data() { /* ...标准的CRUD data... */ },
    created() { this.getList(); },
    methods: { /* ...标准的CRUD methods... */ }
}
</script>
